<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="layui/layui.all.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="layui/css/layui.mobile.css"/>
    <script src="js/jquery3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //实现全选反选
            $("#all").on('click', function() {
                $("tbody input:checkbox").prop("checked", $(this).prop('checked'));
            })
            $("tbody input:checkbox").on('click', function() {
                //当选中的长度等于checkbox的长度的时候,就让控制全选反选的checkbox设置为选中,否则就为未选中
                if($("tbody input:checkbox").length === $("tbody input:checked").length) {
                    $("#all").prop("checked", true);
                } else {
                    $("#all").prop("checked", false);
                }
            })

            //showadd
            var
                fileInput = document.getElementById('test1'),
                info = document.getElementById('demoText'),
                preview = document.getElementById('demo1');
                // 监听change事件:
            $("#test1").on("change",function(){

                // 清除背景图片:
                preview.src = '';
                // 检查文件是否选择:
                if (!fileInput.value) {
                    $("#demo1").hide();
                    info.innerHTML = '没有选择文件';
                    return;
                }
                // 获取File引用:
                var file = fileInput.files[0];
                // 获取File信息:
                info.innerHTML = '文件: ' + file.name; /*+ '<br>' +
                    '大小: ' + file.size + '<br>' +
                    '修改: ' + file.lastModifiedDate;*/
                if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
                    fileInput.value='';
                    $("#demo1").hide();
                    alert('不是有效的图片文件!');
                    return;
                }

                var objUrl = getObjectURL(this.files[0]) ;
                //获取图片的路径，该路径不是图片在本地的路径
                if (objUrl) {

                    $("#demo1").show();
                    $("#demo1").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
                }
            });

            //edituser
            var
                fileInput1 = document.getElementById('test2'),
                info1 = document.getElementById('demoText1'),
                preview1 = document.getElementById('demo2');
            // 监听change事件:
            $("#test2").on("change",function(){
                // 清除背景图片:
                preview1.src = '';
                // 检查文件是否选择:
                if (!fileInput1.value) {
                    $("#demo2").hide();
                    info1.innerHTML = '没有选择文件';
                    return;
                }
                // 获取File引用:
                var file1 = fileInput1.files[0];
                /*// 获取File信息:
                info.innerHTML = '文件: ' + file.name
                 + '<br>' +
                    '大小: ' + file.size + '<br>' +
                    '修改: ' + file.lastModifiedDate;*/
                if (file1.type !== 'image/jpeg' && file1.type !== 'image/png' && file1.type !== 'image/gif') {
                    fileInput1.value='';
                    $("#demo2").hide();
                    alert('不是有效的图片文件!');
                    return;
                }

                var objUrl1 = getObjectURL(this.files[0]) ;
                //获取图片的路径，该路径不是图片在本地的路径
                if (objUrl1) {
                    $("#demo2").show();
                    $("#demo2").attr("src", objUrl1) ; //将图片路径存入src中，显示出图片
                }

            });
        });


        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null ;
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        }

        //删除所选的记录
        function delAll(){
            var userInfoList=new Array();
            $('input[name="userInfo"]:checked').each(function(){
                userInfoList.push($(this).val());//向数组中添加元素
            });
            $.post("/delall",{"listid":userInfoList},function(data){
                if (data=="0"){
                    $('input[name="userInfo"]:checked').parent().parent().remove();
                    window.location.href="/usermsg";
                } else {
                    alert("删除失败！！");
                }
            })
        }
        //删除某一个
        function delOne(obj,id) {
            var truthBeTold = window.confirm("是否确认删除？");
            if (truthBeTold) {
                var url = "/delone";
                $.post(url, {"id":id}, function(data){
                    if (data == "0"){
                        $(obj).parent().parent().remove();
                        window.alert("删除成功！");
                        window.location.href="/usermsg";
                    }else {
                        window.alert("删除失败！")
                    }
                })
            } else window.alert("您取消了删除！");
        }
        //修改弹出层
        function showedit(id) {
            //异步查询出数据,当ajax请求的网址响应返回后，会自动回调匿名函数
            $.post("/showvip",{},function (data) {
                $("#select2").empty();
                $("#select2").append("<option value=''>请选择</option>");
                for (var i = 0; i < data.length; i++) {
                    $("#select2").append("<option value='"+data[i].id+"'>"+data[i].lv+"</option>");
                }
                renderForm();
            });
            $.post("/showallroles",{},function (data) {
                $("#select4").empty();
                $("#select4").append("<option value=''>请选择</option>");
                for (var i = 0; i < data.length; i++) {
                    $("#select4").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
                }
                renderForm();
            });
            $.post("/showuser",{"id":id},function (data) {
                $("#nickname1").val(data.nickname);
                $("#select4").val(data.userRole.roleid);
                $("#userid").val(data.id);
                $("#select2").val(data.vip.id);
                var src_1="upload/"+data.photo;
                $("#demo2").attr("src",src_1);
                $("#demo2").show();
                $("#username1").val(data.username);
                $("#password1").val(data.password);
                $("#golds1").val(data.golds);
                $("#ingots1").val(data.ingots);
                renderForm();
            });
            //负责显示窗口
            var	layer = layui.layer;
            var othis = $(this);
            var type = othis.data('type')
            var text = othis.text();
            layer.open({
                type: 1
                ,skin:'layui-layer-molv'
                ,offset:type
                ,id: 'layerDemo'+type //防止重复弹出
                ,content: $("#form2")
                ,btnAlign: 'c' //按钮居中
                ,shade: 0.5 //不显示遮罩
                ,title:"编辑用户"
                ,area:['500px','600px']
                ,yes: function(index, layero){
                    layer.close(index);
                },
                btn2: function(index, layero){
                    //$("#form1").submit();
                },
                cancel : function() {
                    layer.open({
                        type: 1
                        ,title: false //不显示标题栏
                        ,closeBtn: false
                        ,area: '300px;'
                        ,shade: 0.8
                        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        ,btn: ['是的关闭它', '我再考虑一下']
                        ,yes:function(){
                            layer.closeAll();
                        }
                        ,btnAlign: 'c'
                        ,moveType: 1 //拖拽模式，0或者1
                        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;text-align:center;font-size:20px;">确定关闭吗~!</div>'

                    });
                    return false;
                },
                end:function(){
                    $("#form2").hide();
                    location.reload();
                }
            });
        }
        //重新渲染表单
        function renderForm(){
            layui.use('form', function(){
                var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
                form.render('select');
            });
        }
        //弹出层
        function showadd(){
            //异步查询出数据,当ajax请求的网址响应返回后，会自动回调匿名函数
            $.post("/showvip",{},function (data) {
                $("#select1").empty();
                $("#select1").append("<option selected value=''>请选择</option>");
                for (var i = 0; i < data.length; i++) {
                    $("#select1").append("<option value='"+data[i].id+"'>"+data[i].lv+"</option>");
                }
                renderForm();
            });
            $.post("/showallroles",{},function (data) {
                $("#select3").empty();
                $("#select3").append("<option value=''>请选择</option>");
                for (var i = 0; i < data.length; i++) {
                    $("#select3").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
                }
                renderForm();
            });
           //负责显示窗口
            $(" #test1").val("")
            $("#demo1").src="";
            $("#demo1").hide();
            var	layer = layui.layer;
            var othis = $(this);
            var type = othis.data('type')
            var text = othis.text();
            layer.open({
                type: 1
                ,skin:'layui-layer-molv'
                ,offset:type
                ,id: 'layerDemo'+type //防止重复弹出
                ,content: $("#form")
                ,btnAlign: 'c' //按钮居中
                ,shade: 0.5 //不显示遮罩
                ,title:"添加用户"
                ,area:['500px','600px']
                ,yes: function(index, layero){
                    layer.close(index);
                },
                btn2: function(index, layero){
                    //$("#form1").submit();
                },
                cancel : function() {
                    layer.open({
                        type: 1
                        ,title: false //不显示标题栏
                        ,closeBtn: false
                        ,area: '300px;'
                        ,shade: 0.8
                        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        ,btn: ['是的关闭它', '我再考虑一下']
                        ,yes:function(){
                            layer.closeAll();
                        }
                        ,btnAlign: 'c'
                        ,moveType: 1 //拖拽模式，0或者1
                        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;text-align:center;font-size:20px;">确定关闭吗~!</div>'

                    });
                    return false;
                },
                end:function(){
                    $("#form").hide();
                    location.reload();
                }
            });
        }
        //检查用户名
        function checkItem() {
            var username=$("#username").val();
            if(username==""){
                document.getElementById("error").innerText="用户名不能为空!";
            }else {
                $.post("/checkusername",{"username":username},function(data){
                    if(data=="0"){
                        document.getElementById("error").innerText="用户名可以使用!";
                    }else {
                        document.getElementById("error").innerText="用户名已被注册!";
                        $("#username").val('');
                        return false;
                    }
                })
            }

        }
        //检查密码
        function checkpwd() {
            var password=document.getElementById("password").value;
            var regPassWord = /^[a-zA-Z0-9]+$/;
            if(password.length>6&&password.length<15){
                if(!regPassWord.test(password)){
                    document.getElementById("error2").innerText="密码不符合数字和字母组合!";
                    $("#password").val('');
                    return false;
                }else{
                    document.getElementById("error2").innerText="密码可以使用!";
                }
            }else {
                $("#password").val('');
                document.getElementById("error2").innerText="密码长度必须在6~15之间！";
            }


        }
        //检查用户名
        function checkItem2() {
            var username=$("#username1").val();
            if(username==""){
                document.getElementById("error").innerText="用户名不能为空!";
            }else {
                $.post("/checkusername",{"username":username},function(data){
                    if(data=="1"){
                        document.getElementById("error5").innerText="用户名可以使用!";
                    }else {
                        document.getElementById("error5").innerText="用户名已被注册!";
                        $("#username1").val('');
                        return false;
                    }
                })
            }

        }
        //检查密码
        function checkpwd2() {
            var password=document.getElementById("password1").value;
            var regPassWord = /^[a-zA-Z0-9]+$/;
            if(password.length>6&&password.length<15){
                if(!regPassWord.test(password)){
                    document.getElementById("error6").innerText="密码不符合数字和字母组合!";
                    $("#password1").val('');
                    return false;
                }else{
                    document.getElementById("error6").innerText="密码可以使用!";
                }
            }else {
                $("#password1").val('');
                document.getElementById("error6").innerText="密码长度必须在6~15之间！";
            }


        }
        function to() {
            layer.open({
                type: 2,
                skin: 'layui-layer-demo', //样式类名
                title:["充值类型次数统计","font-size:24px;"],
                anim: 2,
                area: ['600px', '450px'],
                shadeClose: true, //开启遮罩关闭
                content: "/getnumbytime"
            });
        }
        //启用或禁用
        function member_stop(obj,id){
            layer.confirm('确认此操作吗？',function(index){

                if($(obj).attr('title')=='启用'){
                    $.post("/onoroff?status="+1+"&id="+id);
                    //发异步把用户状态进行更改
                    $(obj).attr('title','停用')
                    $(obj).find('i').html('&#xe601;');
                    $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                    //$(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已启用');
                    layer.msg('已启用!',{icon: 1,time:1000});

                }else{
                    $.post("/onoroff?status="+2+"&id="+id);
                    $(obj).attr('title','启用')
                    $(obj).find('i').html('&#xe62f;');
                    //$(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已停用');
                    $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                    layer.msg('已停用!',{icon: 5,time:1000});

                }

            });
        }
        /*点击*/
        function change(){
            var a=$("#ddlSearchType").val();
            $("#select5").html("");
            if(a==2){
                $("#select5").css("display","block");
                $("#input1").css("display","none");
                $.post("/showvip",{},function (data) {
                    var b= " <select name='cityi'  id='dd' lay-verify='required' style=' width: 100px; height:32px; border: #CBCBCB 1px solid;float: left;align-content: center'>";
                    var c="";
                    for(var i=0;i<data.length;i++){
                        c+= "<option value='"+data[i].id +"'>"+data[i].lv+"</option>";
                    }
                    $("#select5").html(b+c+"</select>");

                },"json");
            }else if(a==3){
                $("#select5").css("display","block");
                $("#input1").css("display","none");
                $.post("/showallroles",{},function (data) {
                    var b= " <select name='cityi'  id='dd' lay-verify='required' style=' width: 100px; height:32px; border: #CBCBCB 1px solid;float: left;align-content: center'>";
                    var c="";
                    for(var i=0;i<data.length;i++){
                        c+= "<option value='"+data[i].id +"'>"+data[i].name+"</option>";
                    }
                    $("#select5").html(b+c+"</select>");

                },"json");
            }
            else if(a==1){
                $("#select5").css("display","none");
                $("#input1").css("display","block");
            }
        }
        /*点击页面提交form表单*/
        function gorr(cpage) {
            var url= "/usermsg?pageNum="+cpage;
            $("#fo").attr("action",url);
            $("#fo").submit();
        }

    </script>


</head>


<body>

	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">首页</a></li>
    <li><a href="#">数据表</a></li>
    <li><a href="#">基本内容</a></li>
    </ul>
    </div>
    
    <div class="rightinfo">
    
    <div class="tools">
    
    	<ul class="toolbar">
        <li onclick="showadd()"><span><img src="images/t01.png" /></span>添加</li>
        <li onclick="delAll()"><span><img src="images/t03.png"/></span>删除</li>
        <li onclick="to()"> <span><img src="images/t04.png" /></span>统计</li>
        </ul>
        <ul class="toolbar1">
        <li><span><img src="images/t05.png" /></span>设置</li>
        </ul>
    </div>
        <form action="" method="post" id="fo" >
            <div class="tools ">
                <span style="float: left;line-height: 32px;height: 32px">查询：</span>
                <c:choose>
                    <c:when test="${city!=0}">
                        <input id="span1" value="${city}" name="span1" type="hidden"/>
                    </c:when>
                </c:choose>
                <c:choose>
                    <c:when test="${cityi!=0}">
                        <input id="span2" value="${cityi}" name="span2" type="hidden"/>
                    </c:when>
                </c:choose>
                <select name="city" id="ddlSearchType" onclick="change()"  lay-verify="required" style=" width: 100px; height:32px; border: #CBCBCB 1px solid;float: left;align-content: center">
                    <option value="1" >按玩家昵称</option>
                    <option value="2" >按会员等级</option>
                    <option value="3">按管理员权限</option>
                </select>
                &nbsp;
                <c:choose>
                    <c:when test="${input!='0'}">
                        <input id="input1" type="text"  name="input" class="scinput" style="float: left;display: none" value="${input}">
                    </c:when>
                    <c:otherwise>
                        <input id="input1" type="text"  name="input" class="scinput" style="float: left;display: none">
                    </c:otherwise>
                </c:choose>
                <div id="select5" style="float: left;width: 100px;height: 32px;display:none;">
                </div>
                <input class="scbtn" type="submit" onclick="gorr(1)"  value="点击查询" style="float: left;height:32px " />
            </div>
        </form>
    
    <table class="tablelist">
    	<thead>
    	<tr>
        <th><input name="" id="all" type="checkbox" value=""/></th>
        <th>用户标识</th>
        <th>用户头像</th>
        <th>用户名</th>
        <th>昵称</th>
        <th>经验值</th>
        <th>金币数</th>
        <th>元宝数</th>
        <th>会员等级</th>
        <th>角色名</th>
        <th>创建时间</th>
        <th>状态</th>
        <th>操作</th>
        </tr>
        </thead>
        <tbody id="list">
        <c:forEach items="${pageInfo.list}" var="temp">
            <tr id="tr${temp.id}">
                <td ><input name="userInfo" type="checkbox" value="${temp.id}"/></td>
                <td>${temp.id}</td>
                <td><img src="upload/${temp.photo}" style="width: 50px;height: 50px;border-radius: 5px;border: #FFB800 2px solid;" ></td>
                <td>${temp.username}</td>
                <td>${temp.nickname}</td>
                <td>${temp.experience}</td>
                <td>${temp.golds}</td>
                <td>${temp.ingots}</td>
                <td>${temp.vip.lv}</td>
                <td>${temp.roles.name}</td>
                <td>${temp.regtime}</td>
                <c:choose>
                    <c:when test="${temp.status==1}">
                <td class="td-status">
                    <span class="layui-btn layui-btn-normal layui-btn-mini" style="padding-left: 10px">已启用</span></td>
                <td class="td-manage">
                    <a onclick="member_stop(this,'${temp.id}')" href="javascript:;"  title="停用">
                        <i class="layui-icon">&#xe601;</i>
                    </a>
                    </c:when>
                    <c:when test="${temp.status==2}">
                <td class="td-status">
                    <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled" style="padding-left: 10px">已停用</span></td>
                <td class="td-manage">
                    <a onclick="member_stop(this,'${temp.id}')" href="javascript:;"  title="启用">
                        <i class="layui-icon">&#xe62f;</i>
                    </a>
                    </c:when>
                </c:choose>
                    <a href="#" onclick="showedit(${temp.id})" class="tablelink">查看</a><a href="#" onclick="delOne(this,${temp.id})" class="tablelink"> 删除</a></td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    
   
    <div class="pagin">
    	<div class="message">共<i class="blue">${pageInfo.total}</i>条记录，当前显示第&nbsp;<i class="blue">${pageInfo.pageNum}&nbsp;</i>页</div>
        <div style="width:500px;margin:0 auto ;position:relative">
        <ul class="paginList">
            <li class="paginItem"><a href="javascript:gorr(1)">首页</a></li>
            <c:choose>
                <c:when test="${pageInfo.hasPreviousPage}">
                <li class="paginItem"><a href="javascript:gorr(${pageInfo.prePage})">上一页</a></li>
                </c:when>
                <c:otherwise>
                    <li class="paginItem"><a>上一页</a></li>
                </c:otherwise>
            </c:choose>
            <c:choose>
                <c:when test="${pageInfo.pageNum==2}">
                    <li class="paginItem"><a href="javascript:gorr(${pageInfo.pageNum-1})">${pageInfo.pageNum-1}</a></li>
                </c:when>
                <c:when test="${pageInfo.pageNum>2}">
                    <li class="paginItem"><a href="javascript:gorr(${pageInfo.pageNum-2})">${pageInfo.pageNum-2}</a></li>
                    <li class="paginItem"><a href="javascript:gorr(${pageInfo.pageNum-1})">${pageInfo.pageNum-1}</a></li>
                </c:when>
            </c:choose>
            <li class="paginItem" style="background-color: #056dae;"><a href="javascript:gorr(${pageInfo.pageNum})" style="color: white">${pageInfo.pageNum}</a></li>
            <c:choose>
                <c:when test="${pageInfo.pages-pageInfo.pageNum==1}">
                    <li class="paginItem"><a href="javascript:gorr(${pageInfo.pageNum+1})">${pageInfo.pageNum+1}</a></li>
                </c:when>
                <c:when test="${pageInfo.pages-pageInfo.pageNum>=2}">
                    <li class="paginItem"><a href="javascript:gorr(${pageInfo.pageNum+1})">${pageInfo.pageNum+1}</a></li>
                    <li class="paginItem"><a href="javascript:gorr(${pageInfo.pageNum+2})">${pageInfo.pageNum+2}</a></li>
                </c:when>
            </c:choose>
            <c:choose>
                <c:when test="${pageInfo.hasNextPage}">
            <li class="paginItem"> <a href="javascript:gorr(${pageInfo.nextPage})">下一页</a></li>
                </c:when>
                <c:otherwise>
                    <li class="paginItem"><a>下一页</a></li>
                </c:otherwise>
            </c:choose>
            <li class="paginItem"><a href="javascript:gorr(${pageInfo.pages})">尾页</a></li>
        </ul>
        </div>
    </div>



    <div id="form" style="padding:20px 20px;display: none;">
        <form class="layui-form" id="form1" action="/upphoto" method="post" enctype="multipart/form-data">
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div  class="layui-input-inline">
                    <div style="position: relative;display: inline-block;background: #4098CA;border: 1px solid #99D3F5;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: #1E88C7;text-decoration: none;text-indent: 0;line-height: 30px;width: 100px;height: 30px;color: white;font-size: 12px">
                        <input type="file" id="test1" value="" name="photo" style="position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;"/>点击这里上传文件
                    </div>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1" style="width: 50px;height: 50px;display: none;border: #FFB800 1px solid;">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" value="" id="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" style="width: 190px" onblur="checkItem()">
                </div>
                <div class="layui-form-mid layui-word-aux"  id="error"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码框</label>
                <div class="layui-input-inline">
                    <input type="password" id="password" value="" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" onblur="checkpwd()">
                </div>
                <div class="layui-form-mid layui-word-aux" id="error2">密码只能是字母和数字组合，且长度大于6小于15</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">会员等级</label>
                <div class="layui-input-block" style="width: 190px">
                    <select name="v" id="select1"  required lay-verify="required">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block" style="width: 190px">
                    <select name="r" id="select3"  required lay-verify="required">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">金币数</label>
                <div class="layui-input-inline">
                    <input type="text" name="golds" value="" id="golds" required  lay-verify="required" placeholder="请输入金币数" autocomplete="off" class="layui-input" style="width: 190px">
                </div>
                <div class="layui-form-mid layui-word-aux"  id="error3"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">元宝数</label>
                <div class="layui-input-inline">
                    <input type="text" name="ingots" value="" id="ingots" required  lay-verify="required" placeholder="请输入元宝数" autocomplete="off" class="layui-input" style="width: 190px">
                </div>
                <div class="layui-form-mid layui-word-aux"  id="error4"></div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" style="background-color:#4098CA" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
        <div id="form2" style="padding:20px 20px;display: none;">
            <form class="layui-form" id="form3" action="/upphoto" method="post" enctype="multipart/form-data">
                <div class="layui-form-item">
                    <label class="layui-form-label">头像</label>
                    <div  class="layui-input-inline">
                        <div style="position: relative;display: inline-block;background: #4098CA;border: 1px solid #99D3F5;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: #1E88C7;text-decoration: none;text-indent: 0;line-height: 30px;width: 100px;height: 30px;color: white;font-size: 12px">
                            <input type="file" id="test2" value="2131" name="photo" style="position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;"/>点击这里上传文件
                        </div>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="demo2" style="width: 50px;height: 50px;display: none;border: #FFB800 1px solid;">
                            <p id="demoText1"></p>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="id" id="userid" value=""/>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" value="" id="username1" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" style="width: 190px" onblur="checkItem2()">
                    </div>
                    <div class="layui-form-mid layui-word-aux"  id="error5"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">昵称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="nickname" value="dsg2131" id="nickname1" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" style="width: 190px">
                    </div>
                    <div class="layui-form-mid layui-word-aux"  id="error9"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码框</label>
                    <div class="layui-input-inline">
                        <input type="password" id="password1" value="fasf2131" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" onblur="checkpwd2()">
                    </div>
                    <div class="layui-form-mid layui-word-aux" id="error6">密码只能是字母和数字组合，且长度大于6小于15</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">会员等级</label>
                    <div class="layui-input-block" style="width: 190px">
                        <select name="v" id="select2"  required lay-verify="required">
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-block" style="width: 190px">
                        <select name="r" id="select4"  required lay-verify="required">
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">金币数</label>
                    <div class="layui-input-inline">
                        <input type="text" name="golds" value="100" id="golds1" required  lay-verify="required" placeholder="请输入金币数" autocomplete="off" class="layui-input" style="width: 190px">
                    </div>
                    <div class="layui-form-mid layui-word-aux"  id="error7"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">元宝数</label>
                    <div class="layui-input-inline">
                        <input type="text" name="ingots" value="100" id="ingots1" required  lay-verify="required" placeholder="请输入元宝数" autocomplete="off" class="layui-input" style="width: 190px">
                    </div>
                    <div class="layui-form-mid layui-word-aux"  id="error8"></div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" style="background-color:#4098CA" lay-submit lay-filter="formDemo1">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript">
        //Demo
        layui.use('form', function(){
            var form = layui.form;
            var $= layui.jquery;

            //监听提交
            form.on('submit(formDemo)', function(data){
                var v=$("#select1").val();
                var r=$("#select3").val();
                var param=data.field;//定义临时变量获取表单提交过来的数据，非json格式
               layer.msg(JSON.stringify(param));//测试是否获取到表单数据，调试模式下在页面控制台查看
                $.ajax({
                    url:"/adduser?v="+v+"&r="+r,
                    type:'post',//method请求方式，get或者post
                    dataType:'json',//预期服务器返回的数据类型
                    data:JSON.stringify(param),//表格数据序列化
                    contentType: "application/json; charset=utf-8",
                    success:function(data){
                        var msg="添加成功！"
                        var msg2="添加失败！"
                        if (data == "0") {
                            layer.msg(msg,{
                                icon:1,
                                time:1000
                            },function(){
                                //parent.layer.close(index)
                            });
                        } else{
                            layer.msg(msg2,{
                                icon:2,
                                time:1000
                            },function(){});
                        }
                    }
                });
            });
            return false;
        });
        //Demo
        layui.use('form', function(){
            var form = layui.form;
            var $= layui.jquery;
        form.on('submit(formDemo1)', function(data){
            var v=$("#select2").val();
            var r=$("#select4").val();
            var param=data.field;//定义临时变量获取表单提交过来的数据，非json格式
            layer.msg(JSON.stringify(param));//测试是否获取到表单数据，调试模式下在页面控制台查看
            $.ajax({
                url:"/edituser?v="+v+"&r="+r,
                type:'post',//method请求方式，get或者post
                dataType:'json',//预期服务器返回的数据类型
                data:JSON.stringify(param),//表格数据序列化
                contentType: "application/json; charset=utf-8",
                success:function(data){
                    var msg="添加成功！"
                    var msg2="添加失败！"
                    if (data == "0") {
                        layer.msg(msg,{
                            icon:1,
                            time:1000
                        },function(){
                            //parent.layer.close(index)
                        });
                    } else{
                        layer.msg(msg2,{
                            icon:2,
                            time:1000
                        },function(){});
                    }
                }
            });
        });
        return false;
        });
        $('.tablelist tbody tr:odd').addClass('odd');
            var x =$("#span1").val();/* 如果你用的“变量”是input的话，这里就要写成.value了 */
            $("#ddlSearchType").val(x);
            var y =$("#span2").val() ;/* 如果你用的“变量”是input的话，这里就要写成.value了 */
        var a=$("#ddlSearchType").val();
        if(a==2){
            $("#select5").css("display","block");
            $("#input1").css("display","none");
            $.post("/showvip",{},function (data) {
                var b= " <select name='cityi'  id='dd' lay-verify='required' style=' width: 100px; height:32px; border: #CBCBCB 1px solid;float: left;align-content: center'>";
                var c="";
                for(var i=0;i<data.length;i++){
                    c+= "<option value='"+data[i].id +"'>"+data[i].lv+"</option>";
                }
                $("#select5").html(b+c+"</select>");
                $("#dd").val(y);
            },"json");

        }else if(a==3){
            $("#select5").css("display","block");
            $("#input1").css("display","none");
            $.post("/showallroles",{},function (data) {
                var b= " <select name='cityi'  id='dd' lay-verify='required' style=' width: 100px; height:32px; border: #CBCBCB 1px solid;float: left;align-content: center'>";
                var c="";
                for(var i=0;i<data.length;i++){
                    c+= "<option value='"+data[i].id +"'>"+data[i].name+"</option>";
                }
                $("#select5").html(b+c+"</select>");
                $("#dd").val(y);
            },"json");

        }
        else if(a==1){
            $("#select5").css("display","none");
            $("#input1").css("display","block");
        }
	</script>

</body>

</html>
